<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .red{
            height: 15px;
            width: 100%;
            border-bottom: 3px solid red;
        }
        .cart_tit{
            height: 36px;
            color: #969696;
            font-size: 14px;
            line-height: 36px;
            
        }
        input,img,p{
            display: block;
            float: left;
            margin-top: 10px;
        }
        .abox{
            width: 200px;
        }
        .datas{
            width: 280px;
        }
        .price,.nm,.aprice{
            width: 130px;
        }
        .do{
            width: 70px;
        }
        .book{
            width: 960px;
            height: 150px;
            border-bottom: 1px solid #969696;
            float: left;
            line-height: 100px;
        }
        input{
            margin-left: 50px;
        }
        img{
            margin-right: 10px;
        }
        .book img{
          width: 120px;
          height: 120px;
        }
        .nm span{
          width: 20px;
          height: 20px;
          background-color: #969696;
          display: block;
          text-align: center;
          line-height: 20px;
          cursor: pointer;
        }
        .nm{
          display: flex;
          align-items:center;
          
        }
        .nm span:nth-child(2){
          width: 30px;
          height: 30px;
          background-color:aliceblue;
          
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="nav banner">
          <div class="nav-left box">
            <div class="sent">送至：</div>
            <span class="inner-se"></span>
            <div id="select">
              
              </ul>
            </div>
            <span class="iconfont icon-xiangxia icon1"></span>
            <span class="iconfont icon-xiangshang icon2"></span>
          </div>
          <div class="nav-right">
            <div class="welcome">
              欢迎光临当当，请<a
                href="http://127.0.0.1:5500/dangdang/html/login.html"
                >登录</a
              >
            </div>
            <div class="nav-lis">
              <a href="">成为会员</a>
              <a href="">我的书房</a>
              <div class="box">
                  <span class="iconfont icon-xiangxia icon1"></span>
                  <span class="iconfont icon-xiangshang icon2"></span>
                  <ul class="select-box">
                      <li><a href="#">我的当当</a></li>
                      <li><a href="#">我的订单</a></li>
                      <li><a href="#">购物车</a></li>
                      <li><a href="#">银铃铛抵现</a></li>
                      <li><a href="#">我的收藏</a></li>
                      <li><a href="#">我的余额</a></li>
                      <li><a href="#">我的评论</a></li>
                      <li><a href="#">礼券/礼品卡</a></li>
                    </ul>
              </div> 
              <div class="box">
                  <span class="iconfont icon-xiangxia icon1"></span>
                  <span class="iconfont icon-xiangshang icon2"></span>
                  <ul class="select-box">
                      <li><a href="#">当当拼团</a></li>
                      <li><a href="#">当当拼团</a></li>
                    </ul>
              </div>
              <a href="">小说投稿</a>
              <div class="box">
                  <span class="iconfont icon-xiangxia icon1"></span>
                  <span class="iconfont icon-xiangshang icon2"></span>
                  <ul class="select-box">
                      <li><a href="#">企业采购</a></li>
                      <li><a href="#">大宗采购</a></li>
                      <li><a href="#">礼品卡采购</a></li>
                      <li><a href="#">礼品卡激活</a></li>
                      <li><a href="#">礼品卡使用</a></li>
                      <li><a href="#">分销/荐购</a></li>
                      <li><a href="#">礼品卡专区</a></li>
                    </ul>
              </div>
              <div class="box">
                  <span class="iconfont icon-xiangxia icon1"></span>
                  <span class="iconfont icon-xiangshang icon2"></span>
                  <ul class="select-box">
                  <li><a href="#">客户服务</a></li>
                  <li><a href="#">帮助中心</a></li>
                  <li><a href="#">资助退换货</a></li>
                  <li><a href="#">自助发票</a></li>
                  <li><a href="#">联系客服</a></li>
                  <li><a href="#">我要投诉</a></li>
                </ul>
              </div>
              <a href="">切换无障碍</a></li>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索栏 -->
      <div class="search banner">
        <div class="logo">
          <a href="#"><img src="../img/dd_logo.jpg" alt=""></a>
        </div>
        
      </div>
      <div class="red"></div>
      <div class="cart_tit banner">
        <p class="abox"><input type="checkbox">全选</p>
        <p class="datas">商品信息</p>
        <p class="price">单价（元）</p>
        <p class="nm">数量</p>
        <p class="aprice">金额（元）</p>
        <p class="do">操作</p>
      </div>
      <!-- 商品栏 -->
     <div class="carts banner">
        <!-- <div class="book banner"> 
          <input type="checkbox">
          <img src="../img/cart-7.jpg" alt="">
          <p class="datas">	
              动物妙想国：全18册（3-6岁儿童的认知启蒙科普图画书，儿童好奇心指南，动物家族齐穿越）</p>
          <p class="price">￥150.50</p>
          <p class="nm"><span>-</span>1<span>+</span></p>
          
          <p class="aprice">150.50</p>
          <p class="do del">删除</p>
  
        </div> -->
      </div>
      <script src="../js/index.js"></script>
      <script src="../js/lib/jquery.js"></script>
      <script src="../js/lib/cookie.js"></script>
      <script>
        let str1 = ' ';
        let carts = document.querySelector('.carts');
        console.log(carts);
        
        let pid = getCookie("pid")
        console.log(pid);
        
        
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
         
        id: 139869,
      }).then((resData) => {
        console.log(resData);
        
        let num = null;
        resData.data.forEach((item) => {
           num = item.pnum * item.pprice
          num = parseInt(num * 100)/100
          // console.log(num);
          str1 += `
                <div class="book banner" data-id="${item.pid}"> 
          <input type="checkbox">
          <img src="${item.pimg}" alt="">
          <p class="datas">	
              ${item.pdesc}</p>
          <p class="price">￥${item.pprice}</p>
          <p class="nm nm1"><span>-</span><span>${item.pnum}</span><span>+</span></p>
          
          <p class="aprice">${num}</p>
          <p class="do del">删除</p>
  
          </div>
                `
                
            // console.log(str1);
        })
        
        carts.innerHTML = str1;
        let del = document.querySelectorAll('.del')
        console.log(del);
        let count = null;
        let id = null;
        let nm = document.querySelectorAll('.nm1');
        nm.forEach(item=>{
          // console.log(item);

          /* 减 */
          item.children[0].onclick = function (){
            // console.log(num);
            // console.log(1);
            count =+ item.children[1].innerText;
            count--;
            id = item.parentNode.getAttribute("data-id")
            // console.log(id);
            if(count < 1){
              count = 1;
            }
            // console.log(count);
            item.children[1].innerHTML = count;


            $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
              pid:id,
            uid: 139869,
            pnum:count,
            }).then((resData) => {
              console.log(resData);
          })

              
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
         
         id: 139869,
       }).then((resData) => {
         console.log(resData);
       })
       }
          
     /*  增 */
       item.children[2].onclick = function (){
            // console.log(1);
            count =+ item.children[1].innerText;
            count ++;
            // console.log(count);
            item.children[1].innerHTML = count;
            id = item.parentNode.getAttribute("data-id")

            $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
              pid:id,
            uid: 139869,
            pnum:count,
            }).then((resData) => {
              console.log(resData);
          })

              
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
         
         id: 139869,
       }).then((resData) => {
         console.log(resData);
       })
          }
          
        })
        

        /* 删 */
        del.onclick = function (){

        }


        
      })

      </script>
</body>
</html>